<template>
  <el-scrollbar class="board_self_one">
    <div class="board_con">
      <div class="board_con_box">
        <div class="board_list" v-for="(item, index) in allData" :key="index">
          <div class="title_main_one">
            {{ item.title }}
            <span v-if="item.id === 'workContent'" class="title_time">
              ({{ optionData.showStartTime }}-{{ optionData.showEndTime }})
            </span>
          </div>

          <el-input
            :placeholder="item.placeholder"
            type="textarea"
            v-model="item.entryCont"
            size="small"
            :autosize="{ minRows: item.minRows || 4, maxRows: 10000 }"
            :maxlength="item.maxlength"
            show-word-limit></el-input>
        </div>

        <div class="szsy_main">
          <div class="list_text_title">
            <span class="text">问题建议</span>
          </div>
          <div class="szsy_box">
            <div class="szsy_box_add" v-for="(item, index) in suggestList" :key="index">
              <div class="szsy_box_add_title">
                <div class="szsy_box_add_index">{{ index + 1 }}</div>
                <div>
                  <span
                    v-if="suggestList.length > 1"
                    @click="delSuggestRow(index)"
                    class="el-icon-delete szsy_box_add_btdel">
                    删除
                  </span>
                </div>
              </div>
              <div class="arrract_one_main">
                <el-input
                  type="textarea"
                  placeholder="若无此项内容，则不用填写；如有多条内容，可点击“添加”，逐条新增。"
                  v-model="item.proCon"
                  :rows="5"
                  maxlength="300"
                  show-word-limit></el-input>
                <div class="mar_upload">
                  <UploadFile :file-list="item.proFileList" @saveFileData="saveFileDatas" titleAdd="" />
                </div>
              </div>
            </div>
            <div class="szsy_share_btn_a" @click="addSuggestRows">
              <span class="el-icon-plus color_blue">添 加</span>
            </div>
          </div>
        </div>
        <div class="title_main_one">添加图片/附件</div>
        <div class="board_list_file">
          <UploadFile :file-list="albumList" @saveFileData="saveFileDatas" :filePlain="true" titleAdd="" />
        </div>

        <div class="szsy_main" v-if="quaterData && quaterData.mainLeaderSuggest">
          <p class="boart_text">{{ quaterData.mainLeaderSuggestType == '1' ? '纪实回复' : '退回原因' }}</p>
          <p class="boart_content" v-html="quaterData.mainLeaderSuggest"></p>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
import UploadFile from '@com/UploadFile'
import { addRecordNoteSeason, addRecordNoteSeasonLoading } from '@apis/board.js'
export default {
  components: {
    UploadFile,
  },
  props: {
    optionData: {
      type: Object,
      dafault() {
        return {}
      },
    },
    showTabs: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 路由传参
      routerQuery: {},
      allData: [
        {
          title: '本季度个人总结',
          entryCont: '',
          audioList: [],
          id: 'workCon',
          required: true,
          placeholder: '请输入本季度个人总结',
          minRows: 5,
        },
        {
          title: '教育培训情况',
          entryCont: '',
          id: 'eduCon',
          audioList: [],
          placeholder: '请输入教育培训情况',
          maxlength: '200',
        },
        {
          title: '奖惩情况',
          entryCont: '',
          id: 'rpCon',
          audioList: [],
          placeholder: '请输入奖惩情况',
          maxlength: '200',
        },
      ],
      // 图片
      albumList: [],
      // 文件
      enclosureList: [],
      // 个人季度评价数据
      scoreOption: [],
      // chnNumChar: ['一', '二', '三', '四'],
      suggestList: [
        {
          proCon: '',
          proFileList: [],
          id: '',
          proAudioList: [],
        },
      ],

      quaterData: {},
      tipsThree: '',
    }
  },
  created() {
    this.routerQuery = Object.assign({}, this.$route.query)
  },
  mounted() {
    this.dealData()
  },
  activated() {},
  deactivated() {},
  methods: {
    saveFileDatas() {
      this.commitBoard(3, {})
    },
    dealData() {
      const that = this
      const data = that.optionData
      that.quaterData = data
      that.title = data.recordName
      that.allData[0].entryCont = data.workCon
      that.allData[0].audioList = data.workAudioList
      that.allData[1].entryCont = data.eduCon
      that.allData[1].audioList = data.eduAudioList
      that.allData[2].entryCont = data.rpCon
      that.allData[2].audioList = data.rpAudioList
      that.enclosureList = data.recordFileList
      that.albumList = data.recordFileList
      // 问题建议
      that.suggestList = data.proConList || []
      if (that.suggestList.length === 0) {
        that.suggestList = [
          {
            proCon: '',
            proFileList: [],
            proAudioList: [],
            id: '',
          },
        ]
      }
    },
    // 提交周纪实
    commitBoard(saveStatus, loadstatus) {
      for (let index = 0; index < this.allData.length; index++) {
        const item = this.allData[index]
        if ((saveStatus === 1 || saveStatus === 9) && item.required && item.entryCont.trim().length < 10) {
          this.$message({
            message: `${item.title}必须大于10个字！`,
            type: 'warning',
          })
          return false
        }
      }
      if (saveStatus === 1) {
        for (const i in this.suggestList) {
          if (this.suggestList[i].content && this.suggestList[i].proCon.trim().length <= 5) {
            this.$message({
              message: '问题建议必须大于5个字！',
              type: 'warning',
            })
            return false
          }
        }
        // const confirmText = ['提交后季度总结内容不可修改,', '您确定要提交吗?']
        let confirmText = []
        if (this.tipsThree) {
          confirmText = [`提交后不能更改，${this.tipsThree}内容未填写将直接影响考核分值！请确定是否提交？`]
        } else {
          confirmText = ['提交后不能更改，请确定是否提交?']
        }

        const newDatas = []
        const h = this.$createElement
        for (const i in confirmText) {
          newDatas.push(h('p', null, confirmText[i]))
        }
        this.$confirm('提示', {
          title: '提示',
          message: h('div', { class: 'content-title' }, newDatas),
          customClass: 'messageBox-prompt-test', // 在这里在这里
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.saveData(saveStatus)
        })
      } else {
        this.saveData(saveStatus, loadstatus)
      }
    },
    saveData(saveStatus, loadstatus) {
      const status = saveStatus === 3 || saveStatus === 8 || saveStatus === 9 ? 0 : saveStatus
      if (loadstatus === 'isload') {
        addRecordNoteSeasonLoading({
          ...this.optionData,
          saveStatus: status,
          workCon: this.allData[0].entryCont,
          eduCon: this.allData[1].entryCont,
          rpCon: this.allData[2].entryCont,
          recordFileList: this.albumList,
          proConList: this.suggestList,
        }).then(res => {
          console.log('实时保存')
        })
      } else {
        addRecordNoteSeason({
          ...this.optionData,
          saveStatus: status,
          workCon: this.allData[0].entryCont,
          eduCon: this.allData[1].entryCont,
          rpCon: this.allData[2].entryCont,
          recordFileList: this.albumList,
          proConList: this.suggestList,
        }).then(res => {
          if (res.code === 0) {
            if (saveStatus === 1) {
              this.$message({
                message: '提交成功',
                type: 'success',
              })
            } else if (saveStatus === 0) {
              this.$message({
                message: '暂存成功',
                type: 'success',
              })
            } else if (saveStatus === 8 || saveStatus === 9) {
              this.$emit(
                'subMitData',
                this.allData[0].entryCont,
                saveStatus,
                this.confirmText,
                this.allData[1].entryCont,
                this.allData[2].entryCont
              )
            }
          }
        })
      }
    },
    // 意见建议-添加
    addSuggestRows() {
      this.suggestList.push({
        proCon: '',
        proFileList: [],
        id: '',
        proAudioList: [],
      })
    },
    // 意见建议-删除
    delSuggestRow(index) {
      this.suggestList.splice(index, 1)
      this.saveFileDatas()
    },
  },
}
</script>

<style lang="scss" scoped>
.board_self_one {
  width: 100%;
  height: 100%;
  .board_con {
    padding: 20px 80px;
    .board_list {
      margin-bottom: 10px;
    }
    .title_main_one {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
      .title_time {
        font-weight: 400;
      }
    }

    .szsy_main {
      margin-bottom: 20px;
      .list_text_title {
        display: flex;
        flex-direction: row;
        margin-bottom: 10px;

        .text {
          font-size: 14px;
          font-weight: bold;
          color: #333;
        }
      }
      .szsy_box {
        border: 1px solid #dddddd;
        margin-bottom: 10px;

        .szsy_box_add {
          padding: 10px;
        }
        .szsy_box_add_title {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          height: 40px;
          background-color: #e4ebf0;
          line-height: 40px;
        }
        .szsy_box_add_index {
          color: #4b79bb;
          font-size: 16px;
          font-weight: 600;
          padding-left: 10px;
        }
        .szsy_box_add_btn {
          color: #4b79bb;
          margin-right: 10px;
          cursor: pointer;
        }
        .szsy_box_add_btdel {
          color: #f56c6c;
          margin-right: 10px;
          cursor: pointer;
        }
        .mar_upload {
          border: 1px solid #dcdfe6;
          padding: 10px;
          border-top: 0;
        }
        .szsy_share_btn_a {
          height: 40px;
          line-height: 40px;
          text-align: center;
          border: 1px solid #dcdfe6;
          margin: 10px;
          cursor: pointer;
        }
        .color_blue {
          color: #4b79bb;
          font-weight: 600;
        }
      }
      .boart_text {
        font-size: 14px;
        font-weight: bold;
        color: #333;
        padding-right: 10px;
      }
      .boart_content {
        line-height: 30px;
        padding: 10px;
        background-color: #dddddd;
        color: #333333;
        font-size: 16px;
      }
    }
  }
}
</style>
